<!DOCTYPE html>
<html lang="zh-CN" class="scroll-smooth">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图灵画匠 - AI智能图像风格转换平台</title>
    <meta name="description" content="简单易用的在线图像风格转换工具，展示AI图像处理能力">
    
    <!-- Tailwind CSS via CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    colors: {
                        primary: {
                            50: '#f0f9ff',
                            100: '#e0f2fe',
                            200: '#bae6fd',
                            300: '#7dd3fc',
                            400: '#38bdf8',
                            500: '#0ea5e9',
                            600: '#0284c7',
                            700: '#0369a1',
                            800: '#075985',
                            900: '#0c4a6e',
                        },
                        secondary: {
                            50: '#f5f3ff',
                            100: '#ede9fe',
                            200: '#ddd6fe',
                            300: '#c4b5fd',
                            400: '#a78bfa',
                            500: '#8b5cf6',
                            600: '#7c3aed',
                            700: '#6d28d9',
                            800: '#5b21b6',
                            900: '#4c1d95',
                        }
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', '-apple-system', 'sans-serif'],
                        mono: ['Menlo', 'Monaco', 'Consolas', 'monospace']
                    }
                }
            }
        }
    </script>
    
    <!-- Font Awesome Icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <!-- Preline UI -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@preline/overlay@1.0.0/index.min.css">
    <script src="https://cdn.jsdelivr.net/npm/@preline/overlay@1.0.0/index.min.js"></script>
    
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap');
        
        body {
            font-family: 'Noto Sans SC', sans-serif;
            transition: background-color 0.3s ease, color 0.3s ease;
        }
        
        .fade-in {
            animation: fadeIn 0.5s ease-in-out;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .card-hover {
            transition: all 0.3s ease;
        }
        
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
        }
        
        .btn-hover {
            transition: all 0.2s ease;
        }
        
        .btn-hover:hover {
            transform: scale(1.05);
        }

        /* 主题切换按钮样式 */
        #theme-toggle {
            position: relative;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }

        #theme-toggle:hover {
            transform: scale(1.1);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
        }

        #theme-toggle i {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 1.2rem;
            transition: all 0.3s ease;
        }

        #theme-toggle .fa-moon {
            color: #0ea5e9;
        }

        #theme-toggle .fa-sun {
            color: #f59e0b;
        }

        /* 暗色模式样式优化 */
        .dark #theme-toggle {
            background: linear-gradient(135deg, #1e293b, #0f172a);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
        }

        .dark #theme-toggle:hover {
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
        }

        /* 全局过渡效果 */
        * {
            transition: background-color 0.3s ease, 
                        color 0.3s ease, 
                        border-color 0.3s ease, 
                        box-shadow 0.3s ease;
        }
    </style>
<meta name="code-type" content="html">
</head>
<body class="bg-gray-50 text-gray-800 dark:bg-gray-900 dark:text-gray-200">
    <!-- Header -->
    <header class="sticky top-0 z-50 bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm border-b border-gray-200 dark:border-gray-700">
        <div class="container mx-auto px-4 py-4 flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <i class="fas fa-palette text-2xl text-primary-600 dark:text-primary-400"></i>
                <h1 class="text-xl font-bold text-gray-900 dark:text-white">图灵画匠</h1>
            </div>
            
            <nav class="hidden md:flex space-x-6">
                <a href="#features" class="text-gray-600 hover:text-primary-600 dark:text-gray-300 dark:hover:text-primary-400 transition">功能特点</a>
                <a href="#styles" class="text-gray-600 hover:text-primary-600 dark:text-gray-300 dark:hover:text-primary-400 transition">艺术风格</a>
                <a href="#workflow" class="text-gray-600 hover:text-primary-600 dark:text-gray-300 dark:hover:text-primary-400 transition">使用流程</a>
                <a href="#tech" class="text-gray-600 hover:text-primary-600 dark:text-gray-300 dark:hover:text-primary-400 transition">技术优势</a>
            </nav>
            
            <div class="flex items-center space-x-4">
                <button id="theme-toggle" class="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-all duration-300">
                    <i class="fas fa-moon dark:hidden text-primary-600"></i>
                    <i class="fas fa-sun hidden dark:block text-yellow-500"></i>
                </button>
                
                <button class="md:hidden p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition" id="mobile-menu-button">
                    <i class="fas fa-bars"></i>
                </button>
            </div>
        </div>
        
        <!-- Mobile menu -->
        <div id="mobile-menu" class="hidden md:hidden bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700">
            <div class="container mx-auto px-4 py-3 flex flex-col space-y-3">
                <a href="#features" class="py-2 text-gray-600 hover:text-primary-600 dark:text-gray-300 dark:hover:text-primary-400 transition">功能特点</a>
                <a href="#styles" class="py-2 text-gray-600 hover:text-primary-600 dark:text-gray-300 dark:hover:text-primary-400 transition">艺术风格</a>
                <a href="#workflow" class="py-2 text-gray-600 hover:text-primary-600 dark:text-gray-300 dark:hover:text-primary-400 transition">使用流程</a>
                <a href="#tech" class="py-2 text-gray-600 hover:text-primary-600 dark:text-gray-300 dark:hover:text-primary-400 transition">技术优势</a>
            </div>
        </div>
    </header>
    
    <!-- Hero Section -->
    <section class="py-16 md:py-24 bg-gradient-to-br from-primary-50 to-secondary-50 dark:from-gray-800 dark:to-gray-900">
        <div class="container mx-auto px-4">
            <div class="flex flex-col md:flex-row items-center">
                <div class="md:w-1/2 mb-10 md:mb-0 fade-in">
                    <h1 class="text-4xl md:text-5xl font-bold mb-6 text-gray-900 dark:text-white">AI智能图像风格转换平台</h1>
                    <p class="text-lg text-gray-600 dark:text-gray-300 mb-8">简单易用的在线工具，一键将您的图片转换为各种艺术风格。无需专业知识，体验AI图像处理的无限可能。</p>
                    
                    <div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-4">
                        <a href="#demo" class="btn-hover inline-flex items-center justify-center px-6 py-3 bg-primary-600 hover:bg-primary-700 text-white font-medium rounded-lg shadow-md transition">
                            <i class="fas fa-play-circle mr-2"></i> 立即体验
                        </a>
                        <a href="#features" class="btn-hover inline-flex items-center justify-center px-6 py-3 border border-gray-300 dark:border-gray-600 hover:border-primary-500 text-gray-700 dark:text-gray-200 font-medium rounded-lg shadow-sm transition">
                            <i class="fas fa-info-circle mr-2"></i> 了解更多
                        </a>
                    </div>
                </div>
                
                <div class="md:w-1/2 fade-in">
                    <div class="relative max-w-md mx-auto">
                        <div class="absolute -top-6 -left-6 w-32 h-32 bg-secondary-400 rounded-lg opacity-20 animate-pulse"></div>
                        <div class="absolute -bottom-6 -right-6 w-32 h-32 bg-primary-400 rounded-lg opacity-20 animate-pulse delay-300"></div>
                        
                        <div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-xl overflow-hidden border border-gray-200 dark:border-gray-700 transform rotate-1">
                            <div class="p-4 bg-gray-100 dark:bg-gray-700 border-b border-gray-200 dark:border-gray-600 flex items-center">
                                <div class="flex space-x-2">
                                    <div class="w-3 h-3 rounded-full bg-red-500"></div>
                                    <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
                                    <div class="w-3 h-3 rounded-full bg-green-500"></div>
                                </div>
                                <div class="ml-4 text-sm text-gray-500 dark:text-gray-400">图灵画匠 - 风格转换</div>
                            </div>
                            
                            <div class="p-6">
                                <div class="mb-4 flex justify-between items-center">
                                    <div class="text-sm font-medium text-gray-500 dark:text-gray-400">原图</div>
                                    <div class="text-sm font-medium text-gray-500 dark:text-gray-400">新海诚风格</div>
                                </div>
                                
                                <div class="flex space-x-4">
                                    <div class="w-1/2 border border-gray-200 dark:border-gray-600 rounded overflow-hidden">
                                        <div class="aspect-square bg-gray-200 dark:bg-gray-700 flex items-center justify-center">
                                            <i class="fas fa-mountain text-3xl text-gray-400 dark:text-gray-500"></i>
                                        </div>
                                    </div>
                                    <div class="w-1/2 border border-gray-200 dark:border-gray-600 rounded overflow-hidden">
                                        <div class="aspect-square bg-gradient-to-br from-blue-400 to-purple-500 flex items-center justify-center">
                                            <i class="fas fa-mountain-sun text-3xl text-white"></i>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
                                    <div class="flex justify-between items-center">
                                        <div class="text-sm text-gray-500 dark:text-gray-400">处理时间: 12秒</div>
                                        <button class="text-sm flex items-center text-primary-600 dark:text-primary-400 hover:text-primary-800 dark:hover:text-primary-300">
                                            <i class="fas fa-download mr-1"></i> 下载
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    
    <!-- Features Section -->
    <section id="features" class="py-16 bg-white dark:bg-gray-900">
        <div class="container mx-auto px-4">
            <div class="text-center mb-16 fade-in">
                <h2 class="text-3xl font-bold mb-4 text-gray-900 dark:text-white">产品核心功能</h2>
                <p class="max-w-2xl mx-auto text-gray-600 dark:text-gray-300">图灵画匠提供简单而强大的图像风格转换功能，让每个人都能轻松创作艺术级图像</p>
            </div>
            
            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                <!-- Feature 1 -->
                <div class="card-hover bg-gray-50 dark:bg-gray-800 p-6 rounded-xl border border-gray-200 dark:border-gray-700 fade-in">
                    <div class="w-12 h-12 mb-4 rounded-lg bg-primary-100 dark:bg-primary-900 flex items-center justify-center">
                        <i class="fas fa-upload text-primary-600 dark:text-primary-400 text-xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-2 text-gray-900 dark:text-white">图像上传</h3>
                    <p class="text-gray-600 dark:text-gray-400">支持点击或拖放上传JPEG、PNG、WebP格式图片，最大10MB，推荐分辨率1024×1024像素</p>
                </div>
                
                <!-- Feature 2 -->
                <div class="card-hover bg-gray-50 dark:bg-gray-800 p-6 rounded-xl border border-gray-200 dark:border-gray-700 fade-in">
                    <div class="w-12 h-12 mb-4 rounded-lg bg-secondary-100 dark:bg-secondary-900 flex items-center justify-center">
                        <i class="fas fa-brush text-secondary-600 dark:text-secondary-400 text-xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-2 text-gray-900 dark:text-white">多样风格选择</h3>
                    <p class="text-gray-600 dark:text-gray-400">提供宫崎骏、乐高、皮克斯、新海诚、迪士尼等多种预设风格，满足不同艺术需求</p>
                </div>
                
                <!-- Feature 3 -->
                <div class="card-hover bg-gray-50 dark:bg-gray-800 p-6 rounded-xl border border-gray-200 dark:border-gray-700 fade-in">
                    <div class="w-12 h-12 mb-4 rounded-lg bg-green-100 dark:bg-green-900 flex items-center justify-center">
                        <i class="fas fa-keyboard text-green-600 dark:text-green-400 text-xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-2 text-gray-900 dark:text-white">文字描述定制</h3>
                    <p class="text-gray-600 dark:text-gray-400">通过文字描述进一步定制图像效果，如"增加饱和度"、"添加雪景背景"等，实现个性化创作</p>
                </div>
                
                <!-- Feature 4 -->
                <div class="card-hover bg-gray-50 dark:bg-gray-800 p-6 rounded-xl border border-gray-200 dark:border-gray-700 fade-in">
                    <div class="w-12 h-12 mb-4 rounded-lg bg-blue-100 dark:bg-blue-900 flex items-center justify-center">
                        <i class="fas fa-bolt text-blue-600 dark:text-blue-400 text-xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-2 text-gray-900 dark:text-white">快速生成</h3>
                    <p class="text-gray-600 dark:text-gray-400">AI模型高效处理，10-30秒内完成风格转换，提供进度反馈，减少等待焦虑</p>
                </div>
                
                <!-- Feature 5 -->
                <div class="card-hover bg-gray-50 dark:bg-gray-800 p-6 rounded-xl border border-gray-200 dark:border-gray-700 fade-in">
                    <div class="w-12 h-12 mb-4 rounded-lg bg-purple-100 dark:bg-purple-900 flex items-center justify-center">
                        <i class="fas fa-download text-purple-600 dark:text-purple-400 text-xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-2 text-gray-900 dark:text-white">高质量输出</h3>
                    <p class="text-gray-600 dark:text-gray-400">基于先进AI模型生成高质量图像，一键下载保存，方便分享和使用</p>
                </div>
                
                <!-- Feature 6 -->
                <div class="card-hover bg-gray-50 dark:bg-gray-800 p-6 rounded-xl border border-gray-200 dark:border-gray-700 fade-in">
                    <div class="w-12 h-12 mb-4 rounded-lg bg-yellow-100 dark:bg-yellow-900 flex items-center justify-center">
                        <i class="fas fa-mobile-alt text-yellow-600 dark:text-yellow-400 text-xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-2 text-gray-900 dark:text-white">响应式设计</h3>
                    <p class="text-gray-600 dark:text-gray-400">完美适配各种设备，从桌面到移动端，随时随地体验图像风格转换的乐趣</p>
                </div>
            </div>
        </div>
    </section>
    
    <!-- Style Gallery Section -->
    <section id="styles" class="py-16 bg-gray-50 dark:bg-gray-800">
        <div class="container mx-auto px-4">
            <div class="text-center mb-16 fade-in">
                <h2 class="text-3xl font-bold mb-4 text-gray-900 dark:text-white">丰富艺术风格选择</h2>
                <p class="max-w-2xl mx-auto text-gray-600 dark:text-gray-300">从经典到现代，我们提供多种艺术风格供您选择，满足不同创作需求</p>
            </div>
            
            <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
                <!-- Style 1 -->
                <div class="card-hover bg-white dark:bg-gray-700 rounded-lg overflow-hidden shadow-sm border border-gray-200 dark:border-gray-600 fade-in">
                    <div class="aspect-square bg-gradient-to-br from-blue-100 to-blue-300 dark:from-blue-900 dark:to-blue-700 flex items-center justify-center">
                        <i class="fas fa-wind text-4xl text-blue-600 dark:text-blue-300"></i>
                    </div>
                    <div class="p-4">
                        <h3 class="font-semibold text-gray-900 dark:text-white">宫崎骏风格</h3>
                        <p class="text-sm text-gray-500 dark:text-gray-400">梦幻般的童话世界</p>
                    </div>
                </div>
                
                <!-- Style 2 -->
                <div class="card-hover bg-white dark:bg-gray-700 rounded-lg overflow-hidden shadow-sm border border-gray-200 dark:border-gray-600 fade-in">
                    <div class="aspect-square bg-gradient-to-br from-yellow-100 to-yellow-300 dark:from-yellow-900 dark:to-yellow-700 flex items-center justify-center">
                        <i class="fas fa-cubes text-4xl text-yellow-600 dark:text-yellow-300"></i>
                    </div>
                    <div class="p-4">
                        <h3 class="font-semibold text-gray-900 dark:text-white">乐高风格</h3>
                        <p class="text-sm text-gray-500 dark:text-gray-400">积木构建的创意世界</p>
                    </div>
                </div>
                
                <!-- Style 3 -->
                <div class="card-hover bg-white dark:bg-gray-700 rounded-lg overflow-hidden shadow-sm border border-gray-200 dark:border-gray-600 fade-in">
                    <div class="aspect-square bg-gradient-to-br from-red-100 to-red-300 dark:from-red-900 dark:to-red-700 flex items-center justify-center">
                        <i class="fas fa-robot text-4xl text-red-600 dark:text-red-300"></i>
                    </div>
                    <div class="p-4">
                        <h3 class="font-semibold text-gray-900 dark:text-white">皮克斯风格</h3>
                        <p class="text-sm text-gray-500 dark:text-gray-400">温暖的三维动画风格</p>
                    </div>
                </div>
                
                <!-- Style 4 -->
                <div class="card-hover bg-white dark:bg-gray-700 rounded-lg overflow-hidden shadow-sm border border-gray-200 dark:border-gray-600 fade-in">
                    <div class="aspect-square bg-gradient-to-br from-purple-100 to-purple-300 dark:from-purple-900 dark:to-purple-700 flex items-center justify-center">
                        <i class="fas fa-cloud-sun text-4xl text-purple-600 dark:text-purple-300"></i>
                    </div>
                    <div class="p-4">
                        <h3 class="font-semibold text-gray-900 dark:text-white">新海诚风格</h3>
                        <p class="text-sm text-gray-500 dark:text-gray-400">光影交织的唯美世界</p>
                    </div>
                </div>
                
                <!-- Style 5 -->
                <div class="card-hover bg-white dark:bg-gray-700 rounded-lg overflow-hidden shadow-sm border border-gray-200 dark:border-gray-600 fade-in">
                    <div class="aspect-square bg-gradient-to-br from-pink-100 to-pink-300 dark:from-pink-900 dark:to-pink-700 flex items-center justify-center">
                        <i class="fas fa-crown text-4xl text-pink-600 dark:text-pink-300"></i>
                    </div>
                    <div class="p-4">
                        <h3 class="font-semibold text-gray-900 dark:text-white">迪士尼风格</h3>
                        <p class="text-sm text-gray-500 dark:text-gray-400">经典童话动画风格</p>
                    </div>
                </div>
                
                <!-- Style 6 -->
                <div class="card-hover bg-white dark:bg-gray-700 rounded-lg overflow-hidden shadow-sm border border-gray-200 dark:border-gray-600 fade-in">
                    <div class="aspect-square bg-gradient-to-br from-green-100 to-green-300 dark:from-green-900 dark:to-green-700 flex items-center justify-center">
                        <i class="fas fa-paint-brush text-4xl text-green-600 dark:text-green-300"></i>
                    </div>
                    <div class="p-4">
                        <h3 class="font-semibold text-gray-900 dark:text-white">水彩画风格</h3>
                        <p class="text-sm text-gray-500 dark:text-gray-400">柔和的色彩与笔触</p>
                    </div>
                </div>
                
                <!-- Style 7 -->
                <div class="card-hover bg-white dark:bg-gray-700 rounded-lg overflow-hidden shadow-sm border border-gray-200 dark:border-gray-600 fade-in">
                    <div class="aspect-square bg-gradient-to-br from-indigo-100 to-indigo-300 dark:from-indigo-900 dark:to-indigo-700 flex items-center justify-center">
                        <i class="fas fa-city text-4xl text-indigo-600 dark:text-indigo-300"></i>
                    </div>
                    <div class="p-4">
                        <h3 class="font-semibold text-gray-900 dark:text-white">赛博朋克风格</h3>
                        <p class="text-sm text-gray-500 dark:text-gray-400">高科技低生活的未来</p>
                    </div>
                </div>
                
                <!-- Style 8 -->
                <div class="card-hover bg-white dark:bg-gray-700 rounded-lg overflow-hidden shadow-sm border border-gray-200 dark:border-gray-600 fade-in">
                    <div class="aspect-square bg-gradient-to-br from-gray-100 to-gray-300 dark:from-gray-900 dark:to-gray-700 flex items-center justify-center">
                        <i class="fas fa-ellipsis-h text-4xl text-gray-600 dark:text-gray-300"></i>
                    </div>
                    <div class="p-4">
                        <h3 class="font-semibold text-gray-900 dark:text-white">更多风格</h3>
                        <p class="text-sm text-gray-500 dark:text-gray-400">探索无限可能</p>
                    </div>
                </div>
            </div>
            
            <!-- Style Categories -->
            <div class="mt-16 fade-in">
                <h3 class="text-xl font-semibold mb-6 text-center text-gray-900 dark:text-white">风格分类</h3>
                <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-4">
                    <!-- Category 1 -->
                    <div class="bg-white dark:bg-gray-700 rounded-lg p-4 border border-gray-200 dark:border-gray-600">
                        <h4 class="font-medium mb-3 text-gray-900 dark:text-white">极简主义</h4>
                        <ul class="space-y-2 text-sm text-gray-600 dark:text-gray-300">
                            <li class="flex items-center"><i class="fas fa-circle text-xs mr-2 text-primary-500"></i> 大胆现代</li>
                            <li class="flex items-center"><i class="fas fa-circle text-xs mr-2 text-primary-500"></i> 优雅复古</li>
                            <li class="flex items-center"><i class="fas fa-circle text-xs mr-2 text-primary-500"></i> 未来科技</li>
                            <li class="flex items-center"><i class="fas fa-circle text-xs mr-2 text-primary-500"></i> 北欧风格</li>
                        </ul>
                    </div>
                    
                    <!-- Category 2 -->
                    <div class="bg-white dark:bg-gray-700 rounded-lg p-4 border border-gray-200 dark:border-gray-600">
                        <h4 class="font-medium mb-3 text-gray-900 dark:text-white">后现代结构</h4>
                        <ul class="space-y-2 text-sm text-gray-600 dark:text-gray-300">
                            <li class="flex items-center"><i class="fas fa-circle text-xs mr-2 text-secondary-500"></i> 朋克风格</li>
                            <li class="flex items-center"><i class="fas fa-circle text-xs mr-2 text-secondary-500"></i> 赛博朋克</li>
                            <li class="flex items-center"><i class="fas fa-circle text-xs mr-2 text-secondary-500"></i> 波普艺术</li>
                            <li class="flex items-center"><i class="fas fa-circle text-xs mr-2 text-secondary-500"></i> 孟菲斯</li>
                        </ul>
                    </div>
                    
                    <!-- Category 3 -->
                    <div class="bg-white dark:bg-gray-700 rounded-lg p-4 border border-gray-200 dark:border-gray-600">
                        <h4 class="font-medium mb-3 text-gray-900 dark:text-white">解构瑞士</h4>
                        <ul class="space-y-2 text-sm text-gray-600 dark:text-gray-300">
                            <li class="flex items-center"><i class="fas fa-circle text-xs mr-2 text-green-500"></i> 蒸汽波</li>
                            <li class="flex items-center"><i class="fas fa-circle text-xs mr-2 text-green-500"></i> 超现实拼贴</li>
                            <li class="flex items-center"><i class="fas fa-circle text-xs mr-2 text-green-500"></i> 新巴洛克</li>
                            <li class="flex items-center"><i class="fas fa-circle text-xs mr-2 text-green-500"></i> 新表现主义</li>
                        </ul>
                    </div>
                    
                    <!-- Category 4 -->
                    <div class="bg-white dark:bg-gray-700 rounded-lg p-4 border border-gray-200 dark:border-gray-600">
                        <h4 class="font-medium mb-3 text-gray-900 dark:text-white">液态数字</h4>
                        <ul class="space-y-2 text-sm text-gray-600 dark:text-gray-300">
                            <li class="flex items-center"><i class="fas fa-circle text-xs mr-2 text-blue-500"></i> 数据可视化</li>
                            <li class="flex items-center"><i class="fas fa-circle text-xs mr-2 text-blue-500"></i> 包豪斯</li>
                            <li class="flex items-center"><i class="fas fa-circle text-xs mr-2 text-blue-500"></i> 构成主义</li>
                            <li class="flex items-center"><i class="fas fa-circle text-xs mr-2 text-blue-500"></i> 孟菲斯80年代</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>
    
    <!-- Demo Section -->
    <section id="demo" class="py-16 bg-white dark:bg-gray-900">
        <div class="container mx-auto px-4">
            <div class="text-center mb-12 fade-in">
                <h2 class="text-3xl font-bold mb-4 text-gray-900 dark:text-white">立即体验图灵画匠</h2>
                <p class="max-w-2xl mx-auto text-gray-600 dark:text-gray-300">上传您的图片，选择喜欢的风格，体验AI图像处理的魅力</p>
            </div>
            
            <div class="max-w-4xl mx-auto bg-gray-50 dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6 md:p-8 fade-in">
                <div class="grid md:grid-cols-2 gap-8">
                    <!-- Upload Area -->
                    <div>
                        <h3 class="text-lg font-semibold mb-4 text-gray-900 dark:text-white">上传图片</h3>
                        
                        <div class="border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-lg p-6 text-center cursor-pointer hover:border-primary-500 transition">
                            <div class="flex flex-col items-center justify-center">
                                <i class="fas fa-cloud-upload-alt text-4xl text-gray-400 dark:text-gray-500 mb-3"></i>
                                <p class="text-sm text-gray-500 dark:text-gray-400 mb-1">点击或拖放图片到此处</p>
                                <p class="text-xs text-gray-400 dark:text-gray-500">支持JPEG、PNG、WebP格式，不超过10MB</p>
                            </div>
                            <input type="file" class="hidden" accept="image/jpeg,image/png,image/webp">
                        </div>
                        
                        <div class="mt-4 text-center">
                            <button class="text-sm text-gray-500 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-400 transition">
                                <i class="fas fa-image mr-1"></i> 使用示例图片
                            </button>
                        </div>
                    </div>
                    
                    <!-- Style Selection -->
                    <div>
                        <h3 class="text-lg font-semibold mb-4 text-gray-900 dark:text-white">选择艺术风格</h3>
                        
                        <div class="grid grid-cols-3 gap-3 mb-6">
                            <button class="py-2 px-3 text-xs sm:text-sm rounded border border-gray-200 dark:border-gray-600 hover:border-primary-500 hover:text-primary-600 dark:hover:text-primary-400 transition">无风格</button>
                            <button class="py-2 px-3 text-xs sm:text-sm rounded border border-gray-200 dark:border-gray-600 hover:border-primary-500 hover:text-primary-600 dark:hover:text-primary-400 transition">宫崎骏</button>
                            <button class="py-2 px-3 text-xs sm:text-sm rounded border border-gray-200 dark:border-gray-600 hover:border-primary-500 hover:text-primary-600 dark:hover:text-primary-400 transition">乐高</button>
                            <button class="py-2 px-3 text-xs sm:text-sm rounded border border-gray-200 dark:border-gray-600 hover:border-primary-500 hover:text-primary-600 dark:hover:text-primary-400 transition">皮克斯</button>
                            <button class="py-2 px-3 text-xs sm:text-sm rounded border border-gray-200 dark:border-gray-600 hover:border-primary-500 hover:text-primary-600 dark:hover:text-primary-400 transition">新海诚</button>
                            <button class="py-2 px-3 text-xs sm:text-sm rounded border border-gray-200 dark:border-gray-600 hover:border-primary-500 hover:text-primary-600 dark:hover:text-primary-400 transition">迪士尼</button>
                        </div>
                        
                        <h3 class="text-lg font-semibold mb-4 text-gray-900 dark:text-white">文字描述/指令</h3>
                        
                        <div class="mb-4">
                            <textarea class="w-full px-4 py-3 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:text-gray-200" rows="4" placeholder="描述你想要的图像效果，或者给AI提供具体的编辑指令..."></textarea>
                            <div class="text-xs text-gray-500 dark:text-gray-400 mt-1 text-right">0/500</div>
                        </div>
                        
                        <div class="mb-4">
                            <p class="text-sm text-gray-500 dark:text-gray-400 mb-2">示例：</p>
                            <div class="flex flex-wrap gap-2">
                                <span class="text-xs px-2 py-1 bg-gray-100 dark:bg-gray-700 rounded-full text-gray-600 dark:text-gray-300">增加图像的饱和度和对比度</span>
                                <span class="text-xs px-2 py-1 bg-gray-100 dark:bg-gray-700 rounded-full text-gray-600 dark:text-gray-300">将背景改为海滩日落场景</span>
                                <span class="text-xs px-2 py-1 bg-gray-100 dark:bg-gray-700 rounded-full text-gray-600 dark:text-gray-300">添加明亮的灯光效果</span>
                                <span class="text-xs px-2 py-1 bg-gray-100 dark:bg-gray-700 rounded-full text-gray-600 dark:text-gray-300">将图像转换为水彩画风格</span>
                            </div>
                        </div>
                        
                        <button class="btn-hover w-full py-3 bg-primary-600 hover:bg-primary-700 text-white font-medium rounded-lg shadow-md transition flex items-center justify-center">
                            <i class="fas fa-magic mr-2"></i> 生成图像
                            <span class="text-xs ml-2 opacity-80">处理时间约10-30秒</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </section>
    
    <!-- Workflow Section -->
    <section id="workflow" class="py-16 bg-gray-50 dark:bg-gray-800">
        <div class="container mx-auto px-4">
            <div class="text-center mb-16 fade-in">
                <h2 class="text-3xl font-bold mb-4 text-gray-900 dark:text-white">简单三步，完成创作</h2>
                <p class="max-w-2xl mx-auto text-gray-600 dark:text-gray-300">图灵画匠的使用流程简单直观，让您专注于创意而非技术</p>
            </div>
            
            <div class="max-w-4xl mx-auto">
                <div class="relative">
                    <!-- Timeline -->
                    <div class="hidden md:block absolute left-1/2 top-0 h-full w-0.5 bg-gray-200 dark:bg-gray-600 transform -translate-x-1/2"></div>
                    
                    <!-- Step 1 -->
                    <div class="relative mb-12 md:mb-16 fade-in">
                        <div class="md:flex items-center">
                            <div class="md:w-1/2 md:pr-12 mb-6 md:mb-0 md:text-right">
                                <div class="inline-flex items-center justify-center w-12 h-12 rounded-full bg-primary-100 dark:bg-primary-900 text-primary-600 dark:text-primary-400 shadow-md mb-4">
                                    <span class="text-xl font-bold">1</span>
                                </div>
                                <h3 class="text-xl font-semibold mb-2 text-gray-900 dark:text-white">上传图片</h3>
                                <p class="text-gray-600 dark:text-gray-300">点击上传或直接拖放您的图片到指定区域，支持JPEG、PNG、WebP格式</p>
                            </div>
                            <div class="md:w-1/2 md:pl-12">
                                <div class="bg-white dark:bg-gray-700 rounded-xl shadow-sm border border-gray-200 dark:border-gray-600 overflow-hidden">
                                    <div class="p-4 bg-gray-100 dark:bg-gray-600 border-b border-gray-200 dark:border-gray-500">
                                        <div class="flex items-center space-x-2">
                                            <div class="w-3 h-3 rounded-full bg-red-500"></div>
                                            <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
                                            <div class="w-3 h-3 rounded-full bg-green-500"></div>
                                        </div>
                                    </div>
                                    <div class="p-6">
                                        <div class="aspect-video bg-gray-200 dark:bg-gray-600 rounded flex items-center justify-center">
                                            <i class="fas fa-upload text-3xl text-gray-400 dark:text-gray-500"></i>
                                        </div>
                                        <div class="mt-4 text-center">
                                            <button class="text-sm px-4 py-2 bg-primary-600 hover:bg-primary-700 text-white rounded-lg">选择图片</button>
                                            <p class="text-xs text-gray-500 dark:text-gray-400 mt-2">或拖放图片到此处</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Step 2 -->
                    <div class="relative mb-12 md:mb-16 fade-in">
                        <div class="md:flex items-center flex-row-reverse">
                            <div class="md:w-1/2 md:pl-12 mb-6 md:mb-0 md:text-left">
                                <div class="inline-flex items-center justify-center w-12 h-12 rounded-full bg-secondary-100 dark:bg-secondary-900 text-secondary-600 dark:text-secondary-400 shadow-md mb-4">
                                    <span class="text-xl font-bold">2</span>
                                </div>
                                <h3 class="text-xl font-semibold mb-2 text-gray-900 dark:text-white">选择风格</h3>
                                <p class="text-gray-600 dark:text-gray-300">从多种预设艺术风格中选择您喜欢的，或通过文字描述定制独特效果</p>
                            </div>
                            <div class="md:w-1/2 md:pr-12">
                                <div class="bg-white dark:bg-gray-700 rounded-xl shadow-sm border border-gray-200 dark:border-gray-600 overflow-hidden">
                                    <div class="p-4 bg-gray-100 dark:bg-gray-600 border-b border-gray-200 dark:border-gray-500">
                                        <div class="flex items-center space-x-2">
                                            <div class="w-3 h-3 rounded-full bg-red-500"></div>
                                            <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
                                            <div class="w-3 h-3 rounded-full bg-green-500"></div>
                                        </div>
                                    </div>
                                    <div class="p-6">
                                        <div class="grid grid-cols-3 gap-2">
                                            <div class="aspect-square bg-blue-100 dark:bg-blue-900 rounded flex items-center justify-center cursor-pointer border-2 border-blue-300 dark:border-blue-700">
                                                <i class="fas fa-wind text-xl text-blue-600 dark:text-blue-300"></i>
                                            </div>
                                            <div class="aspect-square bg-yellow-100 dark:bg-yellow-900 rounded flex items-center justify-center cursor-pointer hover:border-2 hover:border-yellow-300 dark:hover:border-yellow-700">
                                                <i class="fas fa-cubes text-xl text-yellow-600 dark:text-yellow-300"></i>
                                            </div>
                                            <div class="aspect-square bg-red-100 dark:bg-red-900 rounded flex items-center justify-center cursor-pointer hover:border-2 hover:border-red-300 dark:hover:border-red-700">
                                                <i class="fas fa-robot text-xl text-red-600 dark:text-red-300"></i>
                                            </div>
                                            <div class="aspect-square bg-purple-100 dark:bg-purple-900 rounded flex items-center justify-center cursor-pointer hover:border-2 hover:border-purple-300 dark:hover:border-purple-700">
                                                <i class="fas fa-cloud-sun text-xl text-purple-600 dark:text-purple-300"></i>
                                            </div>
                                            <div class="aspect-square bg-pink-100 dark:bg-pink-900 rounded flex items-center justify-center cursor-pointer hover:border-2 hover:border-pink-300 dark:hover:border-pink-700">
                                                <i class="fas fa-crown text-xl text-pink-600 dark:text-pink-300"></i>
                                            </div>
                                            <div class="aspect-square bg-gray-100 dark:bg-gray-900 rounded flex items-center justify-center cursor-pointer hover:border-2 hover:border-gray-300 dark:hover:border-gray-700">
                                                <i class="fas fa-ellipsis-h text-xl text-gray-600 dark:text-gray-300"></i>
                                            </div>
                                        </div>
                                        <div class="mt-4">
                                            <input type="text" class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg dark:bg-gray-700 dark:text-gray-200" placeholder="或用文字描述您想要的风格...">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Step 3 -->
                    <div class="relative fade-in">
                        <div class="md:flex items-center">
                            <div class="md:w-1/2 md:pr-12 mb-6 md:mb-0 md:text-right">
                                <div class="inline-flex items-center justify-center w-12 h-12 rounded-full bg-green-100 dark:bg-green-900 text-green-600 dark:text-green-400 shadow-md mb-4">
                                    <span class="text-xl font-bold">3</span>
                                </div>
                                <h3 class="text-xl font-semibold mb-2 text-gray-900 dark:text-white">生成与下载</h3>
                                <p class="text-gray-600 dark:text-gray-300">AI快速处理您的图片，10-30秒内完成风格转换，一键下载高质量结果</p>
                            </div>
                            <div class="md:w-1/2 md:pl-12">
                                <div class="bg-white dark:bg-gray-700 rounded-xl shadow-sm border border-gray-200 dark:border-gray-600 overflow-hidden">
                                    <div class="p-4 bg-gray-100 dark:bg-gray-600 border-b border-gray-200 dark:border-gray-500">
                                        <div class="flex items-center space-x-2">
                                            <div class="w-3 h-3 rounded-full bg-red-500"></div>
                                            <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
                                            <div class="w-3 h-3 rounded-full bg-green-500"></div>
                                        </div>
                                    </div>
                                    <div class="p-6">
                                        <div class="flex space-x-4 mb-4">
                                            <div class="w-1/2 border border-gray-200 dark:border-gray-600 rounded overflow-hidden">
                                                <div class="aspect-square bg-gray-200 dark:bg-gray-600 flex items-center justify-center">
                                                    <i class="fas fa-image text-xl text-gray-400 dark:text-gray-500"></i>
                                                </div>
                                            </div>
                                            <div class="w-1/2 border border-gray-200 dark:border-gray-600 rounded overflow-hidden">
                                                <div class="aspect-square bg-gradient-to-br from-blue-400 to-purple-500 flex items-center justify-center">
                                                    <i class="fas fa-mountain-sun text-xl text-white"></i>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <!-- Progress bar -->
                                        <div class="mb-4">
                                            <div class="h-2 bg-gray-200 dark:bg-gray-600 rounded-full overflow-hidden">
                                                <div class="h-full bg-primary-600 rounded-full w-3/4"></div>
                                            </div>
                                            <div class="text-xs text-gray-500 dark:text-gray-400 mt-1 flex justify-between">
                                                <span>处理中...</span>
                                                <span>75%</span>
                                            </div>
                                        </div>
                                        
                                        <button class="w-full py-2 bg-primary-600 hover:bg-primary-700 text-white rounded-lg flex items-center justify-center">
                                            <i class="fas fa-download mr-2"></i> 下载图像
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    
    <!-- Tech Section -->
    <section id="tech" class="py-16 bg-white dark:bg-gray-900">
        <div class="container mx-auto px-4">
            <div class="text-center mb-16 fade-in">
                <h2 class="text-3xl font-bold mb-4 text-gray-900 dark:text-white">技术优势</h2>
                <p class="max-w-2xl mx-auto text-gray-600 dark:text-gray-300">基于先进AI技术，为您提供高质量的图像风格转换体验</p>
            </div>
            
            <div class="max-w-5xl mx-auto grid md:grid-cols-2 gap-8">
                <!-- Tech 1 -->
                <div class="card-hover bg-gray-50 dark:bg-gray-800 p-6 rounded-xl border border-gray-200 dark:border-gray-700 fade-in">
                    <div class="flex items-start">
                        <div class="flex-shrink-0 mt-1">
                            <div class="w-10 h-10 rounded-lg bg-primary-100 dark:bg-primary-900 flex items-center justify-center">
                                <i class="fas fa-brain text-primary-600 dark:text-primary-400"></i>
                            </div>
                        </div>
                        <div class="ml-4">
                            <h3 class="text-lg font-semibold mb-2 text-gray-900 dark:text-white">先进AI模型</h3>
                            <p class="text-gray-600 dark:text-gray-400">集成Stable Diffusion等先进AI图像处理模型，针对不同艺术风格优化参数，确保高质量的转换效果。</p>
                        </div>
                    </div>
                </div>
                
                <!-- Tech 2 -->
                <div class="card-hover bg-gray-50 dark:bg-gray-800 p-6 rounded-xl border border-gray-200 dark:border-gray-700 fade-in">
                    <div class="flex items-start">
                        <div class="flex-shrink-0 mt-1">
                            <div class="w-10 h-10 rounded-lg bg-secondary-100 dark:bg-secondary-900 flex items-center justify-center">
                                <i class="fas fa-tachometer-alt text-secondary-600 dark:text-secondary-400"></i>
                            </div>
                        </div>
                        <div class="ml-4">
                            <h3 class="text-lg font-semibold mb-2 text-gray-900 dark:text-white">高效处理流程</h3>
                            <p class="text-gray-600 dark:text-gray-400">优化的图像处理队列管理和服务器资源分配，平衡速度与质量，处理时间控制在10-30秒内。</p>
                        </div>
                    </div>
                </div>
                
                <!-- Tech 3 -->
                <div class="card-hover bg-gray-50 dark:bg-gray-800 p-6 rounded-xl border border-gray-200 dark:border-gray-700 fade-in">
                    <div class="flex items-start">
                        <div class="flex-shrink-0 mt-1">
                            <div class="w-10 h-10 rounded-lg bg-green-100 dark:bg-green-900 flex items-center justify-center">
                                <i class="fas fa-language text-green-600 dark:text-green-400"></i>
                            </div>
                        </div>
                        <div class="ml-4">
                            <h3 class="text-lg font-semibold mb-2 text-gray-900 dark:text-white">混合交互能力</h3>
                            <p class="text-gray-600 dark:text-gray-400">结合图像风格转换与文本指令编辑的混合能力，通过自然语言描述进一步定制图像效果。</p>
                        </div>
                    </div>
                </div>
                
                <!-- Tech 4 -->
                <div class="card-hover bg-gray-50 dark:bg-gray-800 p-6 rounded-xl border border-gray-200 dark:border-gray-700 fade-in">
                    <div class="flex items-start">
                        <div class="flex-shrink-0 mt-1">
                            <div class="w-10 h-10 rounded-lg bg-blue-100 dark:bg-blue-900 flex items-center justify-center">
                                <i class="fas fa-shield-alt text-blue-600 dark:text-blue-400"></i>
                            </div>
                        </div>
                        <div class="ml-4">
                            <h3 class="text-lg font-semibold mb-2 text-gray-900 dark:text-white">安全可靠</h3>
                            <p class="text-gray-600 dark:text-gray-400">严格的API安全措施和临时图像存储机制，保护用户隐私和数据安全。</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    
    <!-- Team Section -->
    <section class="py-16 bg-gray-50 dark:bg-gray-800">
        <div class="container mx-auto px-4">
            <div class="text-center mb-16 fade-in">
                <h2 class="text-3xl font-bold mb-4 text-gray-900 dark:text-white">开发团队</h2>
                <p class="max-w-2xl mx-auto text-gray-600 dark:text-gray-300">感谢以下团队成员为图灵画匠项目做出的贡献</p>
            </div>
            
            <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-8 gap-4">
                <div class="flex flex-col items-center">
                    <div class="w-16 h-16 mb-2 rounded-full bg-primary-100 dark:bg-primary-900 flex items-center justify-center text-primary-600 dark:text-primary-400 font-semibold">鱼</div>
                    <span class="text-sm text-gray-700 dark:text-gray-300">鱼得水</span>
                </div>
                <div class="flex flex-col items-center">
                    <div class="w-16 h-16 mb-2 rounded-full bg-secondary-100 dark:bg-secondary-900 flex items-center justify-center text-secondary-600 dark:text-secondary-400 font-semibold">N</div>
                    <span class="text-sm text-gray-700 dark:text-gray-300">Nicol</span>
                </div>
                <div class="flex flex-col items-center">
                    <div class="w-16 h-16 mb-2 rounded-full bg-green-100 dark:bg-green-900 flex items-center justify-center text-green-600 dark:text-green-400 font-semibold">佐</div>
                    <span class="text-sm text-gray-700 dark:text-gray-300">佐罗</span>
                </div>
                <div class="flex flex-col items-center">
                    <div class="w-16 h-16 mb-2 rounded-full bg-yellow-100 dark:bg-yellow-900 flex items-center justify-center text-yellow-600 dark:text-yellow-400 font-semibold">小</div>
                    <span class="text-sm text-gray-700 dark:text-gray-300">小刚</span>
                </div>
                <div class="flex flex-col items-center">
                    <div class="w-16 h-16 mb-2 rounded-full bg-red-100 dark:bg-red-900 flex items-center justify-center text-red-600 dark:text-red-400 font-semibold">阿</div>
                    <span class="text-sm text-gray-700 dark:text-gray-300">阿鸿师兄</span>
                </div>
                <div class="flex flex-col items-center">
                    <div class="w-16 h-16 mb-2 rounded-full bg-purple-100 dark:bg-purple-900 flex items-center justify-center text-purple-600 dark:text-purple-400 font-semibold">J</div>
                    <span class="text-sm text-gray-700 dark:text-gray-300">Jason</span>
                </div>
                <div class="flex flex-col items-center">
                    <div class="w-16 h-16 mb-2 rounded-full bg-pink-100 dark:bg-pink-900 flex items-center justify-center text-pink-600 dark:text-pink-400 font-semibold">W</div>
                    <span class="text-sm text-gray-700 dark:text-gray-300">Wendy</span>
                </div>
                <div class="flex flex-col items-center">
                    <div class="w-16 h-16 mb-2 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center text-blue-600 dark:text-blue-400 font-semibold">S</div>
                    <span class="text-sm text-gray-700 dark:text-gray-300">Stella</span>
                </div>
            </div>
        </div>
    </section>
    
    <!-- CTA Section -->
    <section class="py-16 bg-primary-600 dark:bg-primary-800">
        <div class="container mx-auto px-4 text-center fade-in">
            <h2 class="text-3xl font-bold mb-6 text-white">准备好开始创作了吗？</h2>
            <p class="max-w-2xl mx-auto text-primary-100 mb-8">立即体验图灵画匠，将您的图片转换为惊艳的艺术作品</p>
            <a href="#demo" class="btn-hover inline-flex items-center justify-center px-8 py-4 bg-white hover:bg-gray-100 text-primary-600 font-medium rounded-lg shadow-lg transition">
                <i class="fas fa-magic mr-2"></i> 免费试用
            </a>
        </div>
    </section>
    
    <!-- Footer -->
    <footer class="bg-gray-900 text-gray-400 py-12">
        <div class="container mx-auto px-4">
            <div class="grid md:grid-cols-4 gap-8 mb-8">
                <div>
                    <div class="flex items-center space-x-2 mb-4">
                        <i class="fas fa-palette text-2xl text-primary-400"></i>
                        <h3 class="text-xl font-bold text-white">图灵画匠</h3>
                    </div>
                    <p class="text-sm mb-4">简单易用的在线图像风格转换工具，展示AI图像处理能力。</p>
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-400 hover:text-primary-400 transition">
                            <i class="fab fa-twitter"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-primary-400 transition">
                            <i class="fab fa-github"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-primary-400 transition">
                            <i class="fab fa-instagram"></i>
                        </a>
                    </div>
                </div>
                
                <div>
                    <h4 class="text-sm font-semibold text-white uppercase mb-4">产品</h4>
                    <ul class="space-y-2">
                        <li><a href="#features" class="text-sm hover:text-primary-400 transition">功能特点</a></li>
                        <li><a href="#styles" class="text-sm hover:text-primary-400 transition">艺术风格</a></li>
                        <li><a href="#workflow" class="text-sm hover:text-primary-400 transition">使用流程</a></li>
                        <li><a href="#tech" class="text-sm hover:text-primary-400 transition">技术优势</a></li>
                    </ul>
                </div>
                
                <div>
                    <h4 class="text-sm font-semibold text-white uppercase mb-4">资源</h4>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-sm hover:text-primary-400 transition">文档</a></li>
                        <li><a href="#" class="text-sm hover:text-primary-400 transition">API</a></li>
                        <li><a href="#" class="text-sm hover:text-primary-400 transition">示例库</a></li>
                        <li><a href="#" class="text-sm hover:text-primary-400 transition">帮助中心</a></li>
                    </ul>
                </div>
                
                <div>
                    <h4 class="text-sm font-semibold text-white uppercase mb-4">法律</h4>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-sm hover:text-primary-400 transition">隐私政策</a></li>
                        <li><a href="#" class="text-sm hover:text-primary-400 transition">服务条款</a></li>
                        <li><a href="#" class="text-sm hover:text-primary-400 transition">版权信息</a></li>
                    </ul>
                </div>
            </div>
            
            <div class="pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center">
                <div class="mb-4 md:mb-0">
                    <p class="text-xs">&copy; 2025 图灵画匠. 保留所有权利.</p>
                </div>
                
                <div class="text-xs">
                    <span>编辑时间: 2025.03.30</span>
                </div>
            </div>
        </div>
    </footer>
    
    <!-- Author Info -->
    <div class="fixed bottom-4 right-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4 border border-gray-200 dark:border-gray-700 z-50 fade-in">
        <div class="flex items-center space-x-3">
            <div class="w-10 h-10 rounded-full bg-primary-100 dark:bg-primary-900 flex items-center justify-center">
                <i class="fas fa-user text-primary-600 dark:text-primary-400"></i>
            </div>
            <div>
                <h4 class="text-sm font-medium text-gray-900 dark:text-white">作者信息</h4>
                <div class="flex items-center space-x-2 mt-1">
                    <a href="https://twitter.com/example" class="text-xs text-primary-600 dark:text-primary-400 hover:underline" target="_blank">
                        <i class="fab fa-twitter mr-1"></i> @example
                    </a>
                </div>
                <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">© 2025 - 图灵画匠</p>
            </div>
        </div>
    </div>
    
    <!-- Back to top button -->
    <button id="back-to-top" class="fixed bottom-20 right-4 p-3 bg-primary-600 hover:bg-primary-700 text-white rounded-full shadow-lg transition opacity-0 invisible">
        <i class="fas fa-arrow-up"></i>
    </button>
    
    <script>
        // Dark mode toggle
        const themeToggle = document.getElementById('theme-toggle');
        const html = document.documentElement;
        
        // Check for saved user preference or use system preference
        if (localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
            html.classList.add('dark');
        } else {
            html.classList.remove('dark');
        }
        
        // Toggle theme with smooth transition
        themeToggle.addEventListener('click', () => {
            // Add transition class
            html.classList.add('transitioning');
            
            // Toggle dark mode
            html.classList.toggle('dark');
            
            // Save preference
            localStorage.setItem('theme', html.classList.contains('dark') ? 'dark' : 'light');
            
            // Remove transition class after animation completes
            setTimeout(() => {
                html.classList.remove('transitioning');
            }, 300);
        });
        
        // Listen for system theme changes
        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
            if (!localStorage.getItem('theme')) {
                if (e.matches) {
                    html.classList.add('dark');
                } else {
                    html.classList.remove('dark');
                }
            }
        });
        
        // Mobile menu toggle
        const mobileMenuButton = document.getElementById('mobile-menu-button');
        const mobileMenu = document.getElementById('mobile-menu');
        
        mobileMenuButton.addEventListener('click', () => {
            mobileMenu.classList.toggle('hidden');
        });
        
        // Back to top button
        const backToTopButton = document.getElementById('back-to-top');
        
        window.addEventListener('scroll', () => {
            if (window.pageYOffset > 300) {
                backToTopButton.classList.remove('opacity-0', 'invisible');
                backToTopButton.classList.add('opacity-100', 'visible');
            } else {
                backToTopButton.classList.remove('opacity-100', 'visible');
                backToTopButton.classList.add('opacity-0', 'invisible');
            }
        });
        
        backToTopButton.addEventListener('click', () => {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        });
        
        // Smooth scrolling for anchor links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                
                const targetId = this.getAttribute('href');
                if (targetId === '#') return;
                
                const targetElement = document.querySelector(targetId);
                if (targetElement) {
                    targetElement.scrollIntoView({
                        behavior: 'smooth'
                    });
                    
                    // Close mobile menu if open
                    if (!mobileMenu.classList.contains('hidden')) {
                        mobileMenu.classList.add('hidden');
                    }
                }
            });
        });
        
        // Animation on scroll
        const fadeElements = document.querySelectorAll('.fade-in');
        
        const fadeInObserver = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('animate-fadeIn');
                }
            });
        }, {
            threshold: 0.1
        });
        
        fadeElements.forEach(element => {
            fadeInObserver.observe(element);
        });
    </script>
</body>
</html>